<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> Here is my title </title>
    <link rel="stylesheet" href="css/reveal.css">

    <!-- theme 'black' can be replaced -->
    <link rel="stylesheet" href="css/theme/black.css" id="theme">

    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="lib/css/zenburn.css">

    <!-- Printing and PDF exports -->
    <script>
      var link = document.createElement( 'link' );
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
      document.getElementsByTagName( 'head' )[0].appendChild( link );
    </script>
  </head>

  <body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section data-markdown>
          <script type="text/template">
              ## Page title

              A paragraph with some text and a [link](http://hakim.se).

                  var a = 10;
                  var b = 20;
                  var c = a + b;
          </script>
      </section>
        <section>
          page one
        </section>

       <section>
          page two
        </section>

        <section>
          page three
        </section>
      </div>
    </div>
    
    <script src="lib/js/head.min.js"></script>
    <script src="js/reveal.js"></script>
    <script>
      // Full list of configuration options available at:
      // https://github.com/hakimel/reveal.js#configuration
      Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        transition: 'convex', // none/fade/slide/convex/concave/zoom

        // Transition style for full page slide backgrounds
        // when background changed, 
        // backgroundTransition: 'zoom', // none/fade/slide/convex/concave/zoom
        
        // Optional reveal.js plugins
        dependencies: [
          { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
          { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
          { src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
          { src: 'plugin/zoom-js/zoom.js', async: true },
          { src: 'plugin/notes/notes.js', async: true }
        ]
      });
    </script>
  </body>
</html>